<template>
  <div>
    <van-nav-bar
      title="确认订单"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <router-link :to="{path:'/adress',query:{preOrderId:this.$route.query.preOrderId,total: this.$route.query.total}}">
      <div class="nav">
        <img src="../../assets/3.1定位.png" alt="" />
        <span style="margin-left: 40px"
          >{{ this.$store.state.address.name }}{{ this.$store.state.address.tel
          }}<br />{{ this.$store.state.address.addressDetail }}</span
        >
        <img src="../../assets/jiantou.png" alt="" />
      </div>
    </router-link>
    <p>运费0元(满一百元免运费)</p>
    <div class="test" v-for="(item, index) in orderList" :key="index">
      <div class="top1">
        <img :src="item.imgUrl" alt="" />
        <div class="right">
          <span style="font-size: 15px; text-align: left"></span>
          <span style="font-size: 13px; text-align: left; color: #797d82">{{
            item.masterName
          }}</span>
          <div class="bottom">
            <span>￥{{ item.price / 100 }}</span>
            <span>x{{ item.buyNum }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="text">
      <span style="font-size: 13px">商品总价额</span>
      <span style="color: #c03131; font-size: 13px">{{ total / 100 }}</span>
    </div>
    <div class="text">
      <span style="font-size: 13px">运费</span>
      <span style="color: #c03131; font-size: 13px" v-if="total / 100 >= 100"
        >免运费</span
      >
      <span style="color: #c03131; font-size: 13px" v-else>10元</span>
    </div>
    <div class="da">
      <div class="yi">
        <img src="../../assets/操作-短信.png" alt="" />
        <div class="box">
          <span>优惠券</span>
          <span style="color: #969799">0张券可用</span>
        </div>
        <img src="../../assets/jiantou.png" alt="" />
      </div>
      <div class="yi">
        <i><img src="../../assets/操作-短信.png" alt="" /></i>
        <div class="box">
          <span>苏打券 </span>
          <span style="color: #969799">0张券可用</span>
        </div>
        <img src="../../assets/jiantou.png" alt="" />
      </div>
      <div class="yi">
        <img src="../../assets/钻石_o.png" alt="" />
        <div class="box">
          <span>余额</span>
          <span style="color: #c03131">￥0.00</span>
        </div>
        <img src="../../assets/jiantou.png" alt="" />
      </div>
      <div class="yi">
        <img src="../../assets/发票.png" alt="" />
        <div class="box">
          <span>发票</span>
          <span style="color: #969799">不开发票</span>
        </div>
        <img src="../../assets/jiantou.png" alt="" />
      </div>
    </div>
    <div class="footer">
      <div class="left">
        <span style="color: black">合计:</span>
        <span>￥</span>
        <div class="box">
          <span style="font-size: 20px">{{ num / 100 }}</span>
        </div>
      </div>
      <div style="width: 30%">
        <van-cell
          title="提交订单"
          @click="show = true"
          style="
            height: 40px;
            width: 110px;
            background-color: tomato;
            color: white;
            border: none;
            border-radius: 20px;
            text-align: center;
            line-height: 40px;
          "
        />
        <van-action-sheet
          v-model="show"
          :actions="actions"
          @select="onSelect"
        />
      </div>
    </div>
  </div>
</template>

<script>
import $axios from "@/api/request";
export default {
  data() {
    return {
      orderList: [],
      num: 0,
      show: false,
      preOrderId: [],
      actions: [{ name: "微信支付" }, { name: "支付宝支付" }],
    };
  },
  created() {
    this.order();
  },
  computed: {},
  methods: {
    onClickLeft() {
      this.$router.push("/cart");
    },

    order() {
      let params = this.$route.query.preOrderId;
      this.preOrderId = this.$route.query.preOrderId;
      this.total = this.$route.query.total;
      $axios
        .post("http://zl.huruqing.cn:3003/preOrder/detail?preOrderId=" + params)
        .then((res) => {
          this.orderList = res.result.carts;
        });
      if (this.total / 100 > 100) {
        this.num = this.total;
      } else {
        this.num = (this.total / 100 + 10) * 100;
      }
    },
    onSelect(item) {
      this.show = false;
      let obj = {
        addressInfo: "湖南长沙雨花区",
        allFee: this.$route.query.total,
        preOrderId: this.$route.query.preOrderId,
      };
      $axios
        .post("http://zl.huruqing.cn:3003/order/create", obj)
        .then((res) => {
          this.$router.push({
            path: "/pay",
            query: {
              OrderId: res.result.orderId,
              total: this.total,
              createTime: res.result.createTime,
              company: res.result.company,
              allFee: res.result.allFee,
              img: res.result.qrcode,
            },
          });
        });
    },
  
  },
};
</script>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;

  box-sizing: border-box;
}

body {
  background-color: rgb(244, 244, 244);
}
.top {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
}

.left {
  display: flex;
  width: 50px;
  justify-content: center;
  background-color: white;
  align-items: center;
}

.left img {
  height: 16px;
  background-color: white;
}

.left span {
  color: #c03131;
  padding-left: 4 px;
  font-size: 14px;
  background-color: white;
}

.right span {
  background-color: white;
}

.right {
  text-align: center;
  font-size: 17px;
  background-color: white;
  flex-grow: 1;
}

a {
  text-decoration: none;
  background-color: white;
}

.space {
  width: 50px;
  height: 46px;
  background-color: white;
}

.nav {
  height: 90px;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  border-bottom: 1px solid rgb(244, 244, 244);
}

.nav span {
  flex-grow: 1;
  margin-left: 10px;
  font-size: 15px;
  background-color: white;
}

.nav img {
  height: 14px;
  background-color: white;
}

p {
  height: 34px;
  padding: 10px 15px 0px;
  background-color: white;
  color: #797d82;
  font-size: 13px;
}

.test {
  height: 119px;
  padding-left: 16px;
  padding-right: 16px;
  background-color: white;
  border-bottom: 1px solid rgb(244, 244, 244);
}

.top1 img {
  height: 90px;
  background-color: white;
}

.test .top1 {
  height: 100px;
  display: flex;
  align-items: center;
  background-color: white;
}

.test .top1 .right {
  flex-grow: 1;
  flex-direction: column;
  display: flex;
  height: 90px;
  background-color: white;
}

.bottom {
  display: flex;
  justify-content: space-between;
  background-color: white;
  padding-top: 28px;
}

.text {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  padding: 10px 15px 0px;
}

.text span {
  background-color: white;
  color: #797d82;
}

.yi img {
  height: 20px;
  background-color: white;
}

.yi span {
  background-color: white;
}

.da {
  margin-top: 10px;
}

.yi {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  padding: 10px 16px;
  font-size: 15px;
}

.yi .box {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  background-color: white;
}
.footer {
  height: 50px;
  background-color: white;
  padding: 0px 16px;
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
}
.van-action-sheet__item {
  margin-top: 22px;
  margin-bottom: 5px;
}
.footer .left {
  flex-grow: 1;
  height: 20px;
  display: flex;
  justify-content: flex-end;
  padding-right: 12px;
}
.footer .left .box {
  display: flex;
}
.footer input {
  height: 40px;
  width: 110px;
  background-color: tomato;
  color: white;
  border: none;
  border-radius: 20px;
}
</style>